<template>
  <div class="box">
    <el-tag
      class="tag"
      v-for="(item, index) in tags"
      :key="item.path"
      size="medium"
      :closable="index > 0"
      :disable-transitions="true"
       :class="[
        'eltag',
        { 'light': item.path == $route.path},
      ]"
      @click="goto(item.path)"
      @close="close(index)"
      @contextmenu.prevent.native="rightclick($event, index)"
    >
      <i class="dian" v-if=" item.name == $route.meta.titles[$route.meta.titles.length - 1]"></i>
      {{ item.name }}
    </el-tag>
    <Tagright
      v-show="ishowmenu"
      :thisx="clientX"
      :thisy="clientY"
      :index="Index"
      :tags="tags"
      @fn="clickmenu"
    />
  </div>
</template>
<script>
import { setTheme } from '@/assets/less/theme'
import Tagright from './Tagright.vue'
export default {
  data() {
    return {
      tags: [
        {
          name: '首页',
          path: '/home',
        },
      ],
      ishowmenu: false,
      clientX: 0,
      clientY: 0,
      Index: 0,
    }
  },
  components: {
    Tagright,
  },
  watch: {
    $route: {
      immediate: true,
      handler(val, oldval) {
        // console.log(val)
        let bool = this.tags.find((item) => {
          return val.path == item.path
        })
        if (!bool) {
          this.tags.push({
            name: val.meta.titles[val.meta.titles.length - 1],
            path: val.path,
          })
        }
      },
    },
  },
  mounted() {
    document.addEventListener('click', this.showmenu)
  },
  beforeDestroy() {
    document.removeEventListener('click', this.showmenu)
  },
  methods: {
    init() {
      setTheme('default') // 初始化未默认主题
    },
    
    clickmenu(i) {
      if (i == 5) {
        this.tags = [
          {
            name: '首页',
            path: '/home',
          },
        ]
        this.goto('/home')
      }
      if (i == 4) {
        let ret = this.tags.filter((item, index) => {
          return index <= this.Index
        })
        this.goto(this.tags[this.Index].path)
        this.tags = ret
        console.log(ret)
      }
      if (i == 3) {
        let res = this.tags.filter((item, index) => {
          return index >= this.Index
        })
        this.goto(this.tags[this.Index].path)
        res.unshift({
          name: '首页',
          path: '/home',
        })
        this.tags = res
      }
      if (i == 2) {
        let reg = this.tags.filter((item, index) => {
          return this.Index == index
        })
        if (this.Index != 0) {
          reg.unshift({
            name: '首页',
            path: '/home',
          })
        }
        this.tags = reg
        this.goto(this.tags[this.tags.length - 1].path)
      }
      if (i == 1) {
        this.tags.splice(this.Index, 1)
        this.goto(this.tags[this.tags.length - 1].path)
      }
      if (i == 0) {
        this.goto(this.tags[this.Index].path)
      }
    },
    showmenu() {
      this.ishowmenu = false
    },
    rightclick(eve, index) {
      // console.log(index);
      this.ishowmenu = true
      this.clientX = eve.clientX
      this.clientY = eve.clientY
      this.Index = index
    },
    goto(path) {
      this.$router.push(path)
      this.showmenu()
    },
    close(index) {
      // if (this.tags[index].name == this.$route.meta.titles[this.$route.meta.titles.length - 1]) {
      if (
        this.tags[index].path == this.$route.path &&
        index !== this.tags.length - 1
      ) {
        this.$router.push(this.tags[this.tags.length - 1].path)
      } else if (index == this.tags.length - 1) {
        this.$router.push(this.tags[this.tags.length - 2].path)
      }
      this.tags.splice(index, 1)
      this.showmenu()
    },
  },
  computed: {},
}
</script>

<style lang="less" scoped>
div {
  display: flex;
  .tag {
    margin-left: 5px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .dian {
      display: block;
      width: 8px;
      height: 8px;
      background-color: #fff;
      border-radius: 50%;
      margin-right: 5px;
    }
  }
}

.light {
  background-color: @tagcolor;
  color: @tagtextcolor !important;
  ::v-deep .el-tag__close {
    color: @tagtextcolor;
    &:hover {
      background-color: #ccc;
    }
  }
}
</style>
